<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义不同的节点类型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            height: 100vh;
        }

        .left-nav {
            width: 275px;
            background-color: rgba(154, 205, 50, 0.3);
        }

        .right-container {
            flex: 1;
            background-color: rgba(0, 0, 255, 0.2);
        }
    </style>
</head>
<body>
<div class="container">

    <div class="left-nav" id="dragNav"></div>
    <div class="right-container" id="dragContent"></div>
</div>
<script src="release/go.1.8.3.js"></script>
<script>
    if (window.goSamples) goSamples()
    var $ = go.GraphObject.make;

    var dragContent = $(go.Diagram, "dragContent", {
        initialContentAlignment: go.Spot.Center,
        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,//缩放
        "clickCreatingTool.archetypeNodeData": {text: "new node"},//通过点击创建一个节点
        allowDrop: true,  // must be true to accept drops from the Palette
        "animationManager.duration": 800, // slightly longer than default (600ms) animation
        "undoManager.isEnabled": true,  // enable undo & redo
        "grid.visible": true//绘制网格
    })
    //position 面板（Panels）
    dragContent.add(
        $(go.Node, "Position", {background: "lightgray"},
            $(go.TextBlock, "100,100", {position: new go.Point(100, 100), background: "red"}),
            $(go.TextBlock, "500,200", {position: new go.Point(500, 200)})
        )
    )
    //Vertical 垂直  面板（Panels）isOpposite：true 限定从上往下还是从下往上
    dragContent.add(
        $(go.Node, "Vertical", {background: "lightgray", isOpposite: true},
            $(go.Shape, "Rectangle", {
                width: "50", height: "50", alignment: go.Spot.Top, stroke: "red"
            }),
            $(go.Shape, "Rectangle", {
                width: "50", height: "50", alignment: go.Spot.Top, stroke: "blue    "
            }),
            $(go.TextBlock, "测试", {})
        )
    )
    //Horizontal 水平  面板（Panels） isOpposite：true 限定从左往右还是从右往左
    dragContent.add(
        $(go.Node, "Horizontal", {background: "lightgray", isOpposite: true},
            $(go.Shape, "Rectangle", {
                width: "50", height: "50"
            }),
            $(go.TextBlock, "测试", {})
        )
    )
    //Spot 水平  面板（Panels） isClipping: true  截取图形
    dragContent.add(
        $(go.Part, "Spot", {scale: 1, isClipping: true},
            $(go.Shape, "Circle", {
                width: 55, height: 55
            }),
            $(go.Picture, "cat1.jpg", {width: 50, height: 50})
        )
    )

    dragContent.add(
        // all Parts are Panels
        $(go.Part, "Table",  // or "Table"
            $(go.TextBlock, "row 0\ncol 0",
                {row: 0, column: 0, margin: 2, background: "lightgray"}),
            $(go.TextBlock, "row 0\ncol 1",
                {row: 0, column: 1, margin: 2, background: "lightgray"}),
            $(go.TextBlock, "row 1\ncol 0",
                {row: 1, column: 0, margin: 2, background: "lightgray"}),
            $(go.TextBlock, "row 1\ncol 2",
                {row: 1, column: 2, margin: 2, background: "lightgray"})
        ));

    dragContent.add(
        // all Parts are Panels
        $(go.Part, "Table",  // or "Table"
            $(go.Shape, "Rectangle", {
                fill: "red",
                row: 0, column: 1
            }),
            $(go.Shape, "Rectangle", {
                fill: "red",
                row: 1, column: 2
            }),
            $(go.Shape, "Rectangle", {
                fill: "red",
                row: 2, column: 3
            }),
            $(go.Shape, "Rectangle", {
                fill: "red",
                row: 3, column: 4
            }),
            $(go.Shape, "Rectangle", {
                fill: "red",
                row: 4, column: 5
            })
        ));

    dragContent.addDiagramListener("ViewportBoundsChanged", function (e) {//图形中有变动执行此事件
        console.log(dragContent.scale)
//        dragContent.add(
//            $(go.Node, "Position",
//                $(go.TextBlock, dragContent.scale, {color: "red", position: new go.Point(100, 100)})
//            )
//        )
    })
</script>
</body>
</html>